<template>
<div>
  <div style="background-color: white;">
    <div style="margin-left: 10px;">
      <div style="width: 400px">
        <el-upload
                class="music-uploader"
                drag
                :name="'music'"
                :action="this.actionUrl"
                :show-file-list="true"
                :auto-upload="true"
                :on-success="
                  (response, file, fileList) => {
                  return this.updateTableList();
                }"
                multiple>
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>

        </el-upload>
      </div>


      <el-button slot="trigger" size="small" type="primary">选取文件</el-button>

      <el-table
          :data="pageInfo.list"
          style="width: 1400px"
          :stripe=true
          :border=true
          height="500">
        <el-table-column
            prop="name"
            label="音乐名称"
            width="150">
        </el-table-column>
        <el-table-column
            prop="artist"
            label="歌手"
            width="100">
        </el-table-column>
        <el-table-column
            prop="cover"
            label="图标地址"
            width="250">
        </el-table-column>
        <el-table-column
                prop="url"
                label="下载地址"
                width="250">
        </el-table-column>
        <el-table-column
            label="上传时间"
            width="170">
          <template slot-scope="scope">
            <span>{{ makeDate(scope.row.createtime) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="100">
          <template slot-scope="scope">
            <el-button
                type="success"
                size="mini"
                @click="deleteMusic(scope.row.id,scope.row.txt)">删除（未做）
            </el-button>
          </template>
        </el-table-column>
      </el-table>

    </div>
    <div style="float: right">
      <el-pagination
              background
              layout="prev, pager, next"
              :total="pageInfo.total"
              :page-size="pageInfo.pageSize"
              @current-change="handlePage"
      >
      </el-pagination>
    </div>
  </div>



</div>
</template>

<script>
import {encrypt} from "@/assets/js/rsaUtil"
import {makeDate} from "../../assets/js/dateformat"

export default {
name: "musicManagement",
  data() {
    return {
      actionUrl:'',
      musicDTO :{
        musicname:'',
        artist:'',
        page:1,
      },
      pageInfo:[]
    };
  },
  methods: {
    submitUpload() {
      this.$nextTick(() => {this.$refs.fileUpload.submit();})

    },
    getDiaryList() {
      this.$ajax.post(this.$config.url +`/music/musicList`,this.musicDTO)
        .then(res => {
          console.log(res.data);
          console.log(res.data.list);
          this.pageInfo = res.data.data;
        })
    },
    makeDate(date){
      return makeDate(date);
    },
    deleteMusic(){

    },
    handlePage(val) {
      this.musicDTO.page = val;
      this.getDiaryList();
    },
    updateTableList(){
      console.log("文件上传钩子");
      this.getDiaryList();
    },
  },
  created() {
    this.actionUrl=this.$config.url+"/common/musicUploadList";
    this.getDiaryList();
  },

  mounted(id,value) {

  }

}
</script>

<style scoped>
#screen {
  font-size: 22px;
  text-align: center;
  background-color: rgba(255,255,255,0);
  color: yellow;
  margin-bottom: 20px;
}


</style>